import React, { createElement } from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

//index.js是整个项目的入口文件
const root = ReactDOM.createRoot(document.getElementById('root'));

const title = <span>hello</span>;
const txt = "react";
const renderText = txt => txt
const ele = <h1 id='title'>{title} <span id='text'>{10>50?txt:"200"}{renderText("react")}</span></h1>;

//插值表达式
let number = 1333;
const num = <h2>{number}</h2>;

const ele2 = createElement(
    'h1',
    {id:"title"},
    "hello",
    React.createElement(
        "span",
        {},
        "react"
    )
);

//react实质上就是如下的一个对象
const myCreateElement = (type,props,...children) => {
    let obj = {
        type: type,
        props:{
            ...props,
            children:children
        }
    }
    obj.props.children = children;
    return obj;
}




root.render(ele2);

console.log(myCreateElement('h1',{id:"title"},"hello","react"));

